<template>
  <div class="quiz">
    <div class="qu_top">
      <li @click="back()">
        <van-icon name="arrow-left" />
        <span>提问 列表</span>
      </li>
    </div>
    <div class="qu_menu">
      <li v-for="(item,index) in list" :key="index">
        <span @click="del(item.id)">{{item.id}}</span>
        {{item.word}}
      </li>
      <p @click="carry()">有什么疑问尽管提交?</p>
    </div>
    <div class="carry_quiz" v-show="isFlag">
      <div class="carry_quiz_one">
        <h1>提问</h1>
        <p>
          序号:
          <input type="text" v-model="ObjValue.id" />
        </p>
        <p>
          问题:
          <input type="text" v-model="ObjValue.word" placeholder="请输入你想要提出的问题" />
        </p>
        <p>
          <button @click="off()">取消</button>
          <button @click="ok(ObjValue)">确定</button>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
      isFlag: false,
      ObjValue: {
        id: "",
        word: ""
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      axios({
        url: "/api/quize",
        method: "post"
      }).then(res => {
        this.list = res.data.data;
      });
    },
    back() {
      this.$router.go(-1);
    },
    carry() {
      this.isFlag = true;
    },
    off() {
      this.isFlag = false;
    },
    del(id){
       axios({
           url:"/api/del",
           method:'delete',
           data:{
               id:id
           }
       }).then(res=>{
           this.getList()
       })
    },
    ok(ObjValue) {
      axios({
        url: "/api/quiz",
        method: "post",
        data: {
          id: ObjValue.id,
          word: ObjValue.word
        }
      }).then(res => {
        this.getList();
      });
      this.isFlag = false;
    }
  }
};
</script>

<style>
.query {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.qu_top {
  width: 100%;
  height: 60px;
  font-size: 20px;
  color: #fff;
  background: #1584f5;
}
.qu_top .van-icon {
  padding-top: 15px;
  padding-left: 10px;
  font-size: 24px;
}
.qu_top span {
  padding-top: 10px;
  padding-left: 130px;
  font-size: 16x;
}
.qu_menu {
  width: 95%;
  flex: 1;
  overflow-y: auto;
  margin-left: 10px;
}
.qu_menu li {
  width: 100%;
  height: 60px;
  font-size: 16px;
  color: rgb(107, 106, 106);
  line-height: 60px;
  padding-left: 10px;
  border-bottom: 1px solid rgb(223, 223, 223);
}
.qu_menu span {
  color: #000;
  font-weight: bold;
  font-size: 20px;
}
.qu_menu p {
  text-align: center;
  padding-top: 220px;
}
.carry_quiz {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
}
.carry_quiz_one {
  width: 300px;
  height: 300px;
  background: #fff;
  margin: 100px auto;
}
.carry_quiz_one h1{
    font-weight: bold;
    margin-left: 10px;

}
.carry_quiz_one p{
    margin-left: 30px;
    color: rgb(247, 232, 102);
}
.carry_quiz_one input{
    width: 200px;
    height: 40px;
    border: 1px solid #b9f1ce;
}
.carry_quiz_one button:nth-child(1){
    width: 70px;
    height: 35px;
    border: none;
    outline: none;
    margin-left: 25px;
    color: #fff;
    background: paleturquoise;
}
.carry_quiz_one button:nth-child(2){
     width: 70px;
    height: 35px;
    border: none;
    outline: none;
    margin-left: 60px;
    color: #fff;
    background: palegreen;
}
</style>